<template>
  <a-popover position="br">
    <img @click="onClickHead" class="list" id="driver-head" :src="avatarUrl" />
    <template #content>
      {{ store.userInfo.name }}
    </template>
  </a-popover>
</template>

<script setup>
import { ref, computed, h, toRaw } from "vue";
import { useUserStore } from "@/stores/modules/user.js";
import multiavatar from "@multiavatar/multiavatar/esm";
import { Modal } from "@arco-design/web-vue";
import HeadInfo from "./components/HeadInfo.vue";

const store = useUserStore();

const avatarError = new URL(`../../../assets/head.png`, import.meta.url).href;

const avatarUrl = computed(() => {
  const avatar = store.userInfo.avatar;
  if (!avatar) return avatarError;
  const svgCode = multiavatar(avatar || "");
  return `data:image/svg+xml;base64,${btoa(svgCode)}`;
});

// 点击头像
function onClickHead() {
  Modal.open({
    title: "用户信息",
    content: h(HeadInfo, {
      info: { ...toRaw(store.userInfo) }
    }),
    width: 600,
    footer: false
  });
}
</script>

<style lang="less" scoped></style>
